<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Form 表单</title>
    <script src="${ctx}/static/js/jquery-3.5.1.js"></script>
</head>
<body>
    <div>
        <h3>uri="/saveUser"</h3>
        <form action="${ctx}/saveUser" method="get">
            用户名: <input type="text" name="username"/><br/>
            密码: <input type="password" name="password"/><br/>
            <input type="submit" value="提交"/>
        </form>

        <h3>uri="/saveUserAndCat"</h3>
        <form action="${ctx}/saveUserAndCat" method="post">
            用户名: <input type="text" name="username"/><br/>
            密码: <input type="password" name="password"/><br/>
            生日: <input type="date" name="birthday"/><br/>
            猫名: <input type="text" name="name"/><br/>
            猫年龄: <input type="text" name="age"/><br/>
            <input type="submit" value="提交"/>
        </form>

        <h3>uri="/requestBody"</h3>
        <form action="${ctx}/requestBody" method="post">
            用户名: <input type="text" name="username"/><br/>
            密码: <input type="password" name="password"/><br/>
            生日: <input type="date" name="birthday"/><br/>
            <input type="submit" value="提交"/>
        </form>

        <h3>uri="/ajax"</h3>
        <input id="btn" type="button" value="发送和获取json数据"/>
    </div>

    <script type="text/javascript">
        const catObj = {
            name: "张三",
            age : 18
        };

        $("#btn").click(function(){
            $.ajax({
                url: '${ctx}/ajax',
                method: 'GET',
                contentType:'application/json',
                data: catObj,
                dataType: "json",
                success: function(data){
                    alert(data.name);
                    alert(data.age);
                }
            })
        })
    </script>
</body>
</html>
